<template>
    <alert-dialog class="upload_file" :title="title" :visible.sync="showDialog" width="460px" @close="close">
        <slot name="bodyTop"></slot>
        <el-form :label-width="labelWidth" :label-position="labelPosition">
            <el-form-item :label="labelName">
                <el-upload
                    ref="uploadExcel"
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-remove="handleRemove"
                    :on-change="uploadChange"
                    :file-list="fileList"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">{{ $t('common.pickerFile') }}</el-button><!--选取文件-->
                    <el-button style="margin-left: 16px;" size="small" @click="downloadTemplate">{{ $t('common.downloadTemplateExcel') }}</el-button><!--下载模板-->
                </el-upload>
            </el-form-item>
        </el-form>
        <slot name="bodyBottom"></slot>
        <div slot="footer">
            <el-button @click="submitUpload" :disabled="!uploadFile || disableSubmit" type="primary">{{ confirmButtonText ? confirmButtonText : $t('common.confirm') }}</el-button><!--确认放款-->
            <el-button @click="close">{{ $t('common.cancel') }}</el-button><!--取消-->
        </div>
    </alert-dialog>
</template>

<script>
    import alertDialog from '../alert-dialog';

    export default {
        name: 'upload-file',
        props: {
            title: {
                type: String,
                required: true,
            },
            visible: {
                type: Boolean,
                required: true,
            },
            templateUrl: {
                type: String,
                required: true,
            },
            confirmButtonText: {
                type: String,
                default: ''
            },
            labelWidth: {
                type: String,
                default: '0'
            },
            labelName: {
                type: String,
                default: ''
            },
            labelPosition: {
                type: String,
                default: 'right'
            },
            disableSubmit: {
                type: Boolean,
                default: false
            },
        },
        components: {
            alertDialog
        },
        data() {
            return {
                fileList: [],
                uploadFile: null,
                cacheFileList: [],
                showDialog: false,
            };
        },
        watch: {
            visible(val) {
                if (val) {
                    this.cacheFileList = [];
                    this.uploadFile = null;
                    this.fileList.pop();
                }
                this.showDialog = val;
            }
        },
        methods: {
            handleRemove(file, fileList) {
                this.uploadFile = null;
                this.cacheFileList = fileList;
            },
            downloadTemplate() {
                // window.open('/offline-loan.xlsx');
                window.open(this.templateUrl);
            },
            uploadChange(file, fileList) {
                const ext = file.name.split('.');
                const extName = ext.length > 1 && ext[ext.length - 1];
                const acceptList = ['xlsx', 'xls', 'csv'];
                if (!acceptList.includes(extName)) {
                    this.$message.error(this.$t('verify.plsUploadExcelFile')); // 请上传Excel文件
                    fileList.shift();
                    fileList.shift();
                    return;
                }
                this.uploadFile = file;
                if (fileList.length > 1) fileList.shift();
                this.cacheFileList = fileList;
            },
            submitUpload() {
                this.$emit('submitUpload', this.uploadFile.raw);
            },
            close() {
                this.$emit('update:visible', false);
            },
        },
        created() {
            this.showDialog = this.visible;
        },
    }
</script>

<style scoped>

</style>
